<template>
	<view class="wrap">
		<cu-custom bgColor="bg-white">
			<block slot="content">授权登录</block>
		</cu-custom>
		<view class="top"></view>
		<view class="content">
			<!-- <view class="title">欢迎登录</view> -->
			<u-form-item>
				<u-input v-model="username" placeholder="请输入用户名" />
			</u-form-item>
			<u-form-item>
				<u-input type="password" v-model="password" placeholder="请输入密码" />
			</u-form-item>
			<u-gap height="80"></u-gap>
			<button @click="login" class="getSmsCode">登录</button>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import storage from '@/common/storage.js';
	export default {
		data() {
			return {
				username: '',
				password: '',
				mid: 0,
				token: '',
				name: ''
			};
		},
		methods: {
			login() {
				uni.request({
					url: request.baseUrl + 'm-login',
					method: 'POST',
					data: {
						username: this.username,
						password: this.password
					},
					success: (res) => {
						console.log("成功", res)
						if (res.data.code === 200) {
							this.mid = res.data.data.mid
							this.token = res.data.data.token
							this.name = res.data.data.user_info.name
							uni.showToast({
								title: "登录成功",
								icon: 'success'
							}).then(() => {
								uni.setStorageSync('mid', this.mid)
								uni.setStorageSync('token', this.token)
								uni.setStorageSync('name', this.name)
							}).finally(() => {
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/index/index'
									})
								}, 100)
							})
						} else if (res.data.code === 500) {
							uni.showToast({
								title: res.data.msg,
								icon:'error'
							}).then(()=>{
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/index/index'
									})
								},1500)
							})
						}
					},
					fail: (error) => {
						console.error('请求错误:', error);
						uni.showToast({
							title: '请求错误',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 0 auto;
			padding-top: 80rpx;

			// .title {
			// 	text-align: left;
			// 	font-size: 60rpx;
			// 	font-weight: 500;
			// 	margin-bottom: 100rpx;
			// }

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {

				font-size: 20rpx;
				margin-bottom: 60rpx;
				margin-top: 30rpx;
			}

			.getSmsCode {
				color: #ffffff;
				background-color: rgb(30, 56, 128);

				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.bottom {
			.loginType {
				display: flex;
				padding: 260rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;


				.link {}
			}
		}
	}
</style>